import React, { useState, useEffect } from 'react'
import './index.scss'
export default function MyFooter (props) {

    // allStatus 全选受控的值
    const { list, allStatus } = props
    const handlerAllStatus = (flag) => {
        props.changeAllState(flag)
        setListDataChekced('allStatus', flag)

    }


    // useEffect(() => {
    //     getListDataChekced('allStatus')
    // })

    //  全选状态 缓存
    const getListDataChekced = (key) => {
        return JSON.parse(localStorage.getItem(key))

    }

    const setListDataChekced = (key, data) => {
        localStorage.setItem(key, JSON.stringify(data))
    }


    const [total, setTotal] = useState(0)
    const [number, setNumber] = useState(0)



    useEffect(() => {
        let num = 0
        let number = 0
        for (let index = 0; index < list.length; index++) {
            let element = list[index];

            if (element.goods_state) {
                console.log(element.goods_count)
                console.log(element.goods_price)
                var count = element.goods_count
                var price = element.goods_price
                num += count * price
                number += count
            }

        }
        console.log(num)
        setTotal(num)
        setNumber(number)


    }, [list])

    return (
        <div className="my-footer">
            <div className="custom-control custom-checkbox">
                <input type="checkbox" className="custom-control-input" id="footerCheck"
                    onChange={(e) => handlerAllStatus(e.target.checked)}
                    checked={getListDataChekced('allStatus')}


                />
                <label className="custom-control-label" htmlFor="footerCheck"



                >全选</label>
            </div>
            <div>
                <span>合计: </span>
                <span className="price">¥  {total}</span>
            </div>
            <button type="button" className="footer-btn btn btn-primary">结算 (  {number})</button>
        </div>
    )
}
